/*--------------------
     User Actions
---------------------*/
.ui.comments {

  .empty1 {

  }

  .empty2 {}
  .empty3 {
    .empty4 {}
  }
  .empty5 {
    .empty6 {

    }
  }
  .empty7 {
    /** { hello } */
    .empty8 {
      /* { world } */
    }
  }

  .anime {
    @keyframes framer {
      from {
        color: white;
      }
      to {
        color: red;
      }
    }
  }

  .comment {
    .actions {
      font-size: 0.9em;

      a {
        display: inline-block;
        margin: 0em 0.3em 0em 0em;
        color: rgba(0, 0, 0, 0.3);
      }

      a.active, a:hover {
        color: rgba(0, 0, 0, 0.6);
      }
    }
  }

  .complex {
    .actions {
      font-size: 0.9em;
      /* great comment */
      a {
        display: inline-block;
        margin: 0em 0.3em 0em 0em;
        color: rgba(0, 0, 0, 0.3);
        b {
          display: inline-block;
          margin: 0em 0.3em 0em 0em;
          color: rgba(0, 0, 0, 0.3);
        }
        b.active, b:hover {
          color: rgba(0, 0, 0, 0.6);
        }
      }
      /* great {} comment ! */
      a.active, a:hover {
        color: rgba(0, 0, 0, 0.6);
        b {
          display: inline-block;
          margin: 0em 0.3em 0em 0em;
          color: rgba(0, 0, 0, 0.3);
          c {
            display: inline-block;
            margin: 0em 0.3em 0em 0em;
            color: rgba(0, 0, 0, 0.3);

            d.active, d:hover {
              color: rgba(0, 0, 0, 0.6);
            }
          }
        }
        b.active, b:hover {
          color: rgba(0, 0, 0, 0.6);
        }
      }
    }
    @keyframes framer {
      from {
        content: '{}';
      }
      /* great comment */
      50% {
        color: green;
      }
      /* great {} comment ! */
      to {
        color: red;
      }
    }
  }
}
